<template>

	<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration"
	 indicator-active-color="#fff" indicator-color="rgba(255,255,255,.6)">
		<swiper-item class="swiper-item" v-for="item in imgUrls">
			<image class="swiper-image" mode="widthFix" :src="item.typelitpic"></image>
		</swiper-item>
	</swiper>

</template>

<script>
	import {
		ajaxlist
	} from '../../utils/api.js'
	export default {
		data() {
			return {
				imgUrls:[],
				indicatorDots: true,
				autoplay: true,
				interval: 30000,
				duration: 500,
			}
		},
		mounted() {
			this.getList(4, 1, 10); //获取banner
		},
		methods: {
			getList: function(typeId, pageNum, pageSize) {
				var that = this;
				ajaxlist(typeId, pageNum, pageSize).then((res) => {
					
		console.log(res)
					if (res.data && res.data.data) {
						let datas = res.data.data.map((res) => {
							return {
								typelitpic: res.cfg_basehost + res.banner_pic_link,
								typeid: res.id,
								typename: res.typename,
								title: res.title
							}
						})
						that.imgUrls=datas
						
					}
				})
				
			}
		}
	}
</script>

<style lang="scss">
	.swiper {
		height: 390rpx;
		width: 100%;
	}

	.swiper-item {
		width: 100vw;
		height: 390rpx;

		.swiper-image {
			width: 750rpx;
			height: 390rpx;
			display: block;
		}
	}

</style>
